<template>
  <div class="com-bread-crumb">
    <ul>
      <li>
        <nuxt-link to="/">
          <div class="crumb-name">首页</div>
          <div class="crumb-join"><i class="ri-arrow-right-s-line"></i></div>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/tutorial">
          <div class="crumb-name">教程</div>
          <div class="crumb-join"><i class="ri-arrow-right-s-line"></i></div>
        </nuxt-link>
      </li>
      <li class="active">
        <div class="crumb-name">{{ lastTitle }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumb',
  props: {
    lastTitle: String
  },
  data () {
    return {}
  },
  created () {}
}
</script>
<style lang="less" scoped>
.com-bread-crumb {
  ul {
    height: 48px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    padding: 0 16px;
    border-radius: 4px;
    li, a {
      display: flex;
      align-items: center;
      padding-right: 6px;
      .crumb-name {
        font-size: 13px;
        color: #4c4c4c;
      }
      &.active {
        .crumb-name {
          color: var(--primary-color);
        }
      }
      .crumb-join {
        margin-left: 6px;
        i {
          font-size: 18px;
          color: #999;
        }
      }
    }
    a {
      padding-right: 0;
    }
  }
}
</style>
